<template>
  <div class="common-list comp-company-orders" v-loading.fullscreen="loading">
    <div class="common-list__head">
      <el-input
        class="filter"
        v-model="filters.title"
        size="small"
        style="width: 280px"
        clearable
        placeholder="请输入"
        :readonly="loading"
        @change="search(true)"
      >
        <span slot="prepend">事项标题</span>
      </el-input>
      <el-input
        class="filter"
        v-model="filters.content"
        size="small"
        style="width: 280px"
        clearable
        placeholder="请输入"
        :readonly="loading"
        @change="search(true)"
      >
        <span slot="prepend">事项描述</span>
      </el-input>
      <el-select
        class="filter"
        v-model="filters.status"
        size="small"
        style="width: 160px"
        @change="search(true)"
      >
        <el-option label="不限事项状态" :value="null"></el-option>
        <el-option
          v-for="data in env.orderStatus"
          :key="data.id"
          :label="data.name"
          :value="data.value"
        ></el-option>
      </el-select>
      <el-select
        class="filter"
        v-model="filters.evaluated"
        size="small"
        style="width: 160px"
        @change="search(true)"
      >
        <el-option label="不限评价状态" :value="null"></el-option>
        <el-option
          v-for="data in env.orderEvaluateds"
          :key="data.id"
          :label="data.name"
          :value="data.value"
        ></el-option>
      </el-select>
      <el-button class="filter" type="primary" size="small" @click="search()"
        >查询</el-button
      >
      <el-button class="filter" type="plain" size="small" @click="reset(true)"
        >重置</el-button
      >
    </div>
    <div class="common-list__nect">
      <slot
        name="head"
        :loading="loading"
        :filters="filters"
        :selects="selects"
      ></slot>
    </div>
    <div class="common-list__body">
      <el-table
        ref="table"
        size="medium"
        height="100%"
        :data="list"
        @header-click="onTableHeaderClick"
        @row-click="onTableRowClick"
        @selection-change="onTableSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          v-if="select"
        ></el-table-column>
        <el-table-column label="事项标题" min-width="12">
          <template #default="scope">
            <a
              :href="'#/staff/work/order?orderId=' + scope.row.id"
              v-if="link && access('staff-work')"
              >{{ scope.row.title }}</a
            >
            <a
              :href="'#/officer/work/order?orderId=' + scope.row.id"
              v-else-if="link && access('officer-work')"
              >{{ scope.row.title }}</a
            >
            <a
              :href="'#/work/order?orderId=' + scope.row.id"
              v-else-if="link && access('work')"
              >{{ scope.row.title }}</a
            >
            <span v-else>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="事项分类" min-width="6">
          <template #default="scope">
            <template v-if="scope.row.tags.length > 0">
              <div v-for="tag in scope.row.tags" :key="tag.id">
                {{ tag.name }}
              </div>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="负责工作队/服务专员" min-width="8">
                   <template #default="scope">
                       <div>{{ scope.row.hand.name }}</div>
                       <span>{{ scope.row.handler.name }}</span>
                       <span style="margin-left: 0.5em; color: #aaa">{{ scope.row.handler.number }}</span>
                   </template>
          </el-table-column> -->
        <el-table-column label="事项层面" min-width="4">
          <template #default="scope">
            <span v-if="scope.row.dept.county.id">县级</span>
            <span v-else-if="scope.row.dept.city.id">市级</span>
            <span v-else-if="scope.row.dept.province.id">自治区级</span>
          </template>
        </el-table-column>
        <el-table-column label="事项状态" min-width="4">
          <template #default="scope">
            <span
              class="el-status--info"
              v-if="scope.row.status === 'created'"
            ></span>
            <span
              class="el-status--danger"
              v-else-if="
                scope.row.status === 'published' ||
                scope.row.status === 'return'
              "
            ></span>
            <span
              class="el-status--warning"
              v-else-if="scope.row.status === 'handling'"
            ></span>
            <span
              class="el-status--success"
              v-else-if="scope.row.status === 'finished'"
            ></span>
            <span>{{ scope.row.statusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价信息" min-width="8">
          <template #default="scope">
            <template
              v-if="
                scope.row.status === 'finished' && scope.row.evaluated === 'yes'
              "
            >
              <div>
                <span>评价打分：</span>
                <span>{{ scope.row.evaluatedStars }}分</span>
              </div>
              <div>
                <span>评价内容：</span>
                <span>{{ scope.row.evaluatedContent }}</span>
              </div>
              <div>
                <span>评价人：</span>
                <span style="margin-right: 0.5em">{{
                  scope.row.evaluatedCreator.name
                }}</span>
                <span
                  v-if="
                    scope.row.evaluatedCreator.employees.length > 0 &&
                    scope.row.evaluatedCreator.employees[0].company.id ===
                      scope.row.company.id
                  "
                  >[{{ scope.row.evaluatedCreator.employees[0].duty }}]</span
                >
              </div>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="提交人/提交时间" min-width="6">
          <template #default="scope">
            <span>{{ scope.row.creator.name }}</span>
            <span style="margin-left: 0.5em; color: #aaa">{{
              scope.row.creator.number
            }}</span>
            <div style="color: #aaa">{{ scope.row.createdAt }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          :width="160"
          v-if="$slots.body || $scopedSlots.body"
        >
          <template #default="scope">
            <slot
              name="body"
              :loading="loading"
              :filters="filters"
              :data="scope.row"
              :selects="selects"
            ></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="common-list__foot"
      :class="{ 'common-list__foot--slot': $slots.foot || $scopedSlots.foot }"
    >
      <el-pagination
        background
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="filters.linage"
        :current-page="filters.page"
        :total="filters.total"
        @size-change="onTableLinageChange"
        @current-change="onTablePageChange"
      ></el-pagination>
      <slot
        name="foot"
        :loading="loading"
        :filters="filters"
        :selects="selects"
      ></slot>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import { object, array, string, int, session } from "../util";
export default {
  name: "comp-company-orders",
  mixins: [mixin],
  props: {
    companyId: { type: String, default: null },
    select: { type: Boolean, default: false },
    link: { type: Boolean, default: false },
  },
  data: () => ({
    loading: false,
    filters: {
      ids: null,
      companyId: null,
      title: null,
      content: null,
      evaluated: null,
      status: null,
      linage: 10,
      page: 1,
      total: 0,
    },
    list: [],
    selects: [],
  }),
  methods: {
    reset(deep) {
      let data = deep
        ? {}
        : object(
            session([
              this.env.key,
              this.$options.name,
              "filters",
              this.$route.fullPath,
            ])
          );
      this.filters = Object.assign(this.$options.data().filters, data);
      this.search(true);
    },
    validate() {
      let filters = this.filters;
      filters.ids = null;
      filters.companyId = this.companyId;
      filters.total = Math.max(int(filters.total), 0);
      filters.linage = Math.max(int(filters.linage), 1);
      filters.page = Math.max(
        Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)),
        1
      );
      session(
        [this.env.key, this.$options.name, "filters", this.$route.fullPath],
        filters
      );
    },
    onTableHeaderClick() {
      this.select && this.$refs.table.toggleAllSelection();
    },
    onTableRowClick(row) {
      this.select && this.$refs.table.toggleRowSelection(row);
    },
    onTableLinageChange(value) {
      this.filters.linage = value;
      this.search(true);
    },
    onTablePageChange(value) {
      this.filters.page = value;
      this.search(true);
    },
    onTableSelectionChange(selects) {
      this.filters.ids = selects.map((data) => data.id);
      this.selects = selects;
    },
    search(clean) {
      if (this.loading) return;
      if (clean) this.list == [];
      if (clean) this.selects = [];
      let filters = this.filters;
      this.validate();
      this.loading = true;
      this.plugins.user.getCompanyOrders(filters).then((res) => {
        this.loading = false;
        this.list = [];
        this.selects = [];
        this.$nextTick(() => this.$refs.table.doLayout());
        if (res.code === 0) {
          let data = res.data;
          if (data.page > 1 && data.list.length === 0) {
            filters.total = 0;
            this.search();
          } else {
            filters.total = data.total;
            this.list = data.list.map((order) => {
              let creator = order.evaluatedCreator;
              let employees = creator.employees.splice(0);
              for (let employee of employees)
                employee.company.id === order.company.id &&
                  creator.employees.push(employee);
              return order;
            });
            this.validate();
          }
        } else {
          filters.total = 0;
          this.validate();
          this.plugins.modal.toast(
            "列表加载失败<br>" + res.code + "：" + res.msg,
            "error"
          );
        }
      });
    },
    init() {
      this.loading = false;
      this.reset();
    },
  },
};
</script>

<style lang="scss">
.comp-company-orders {
  overflow: hidden;
}
</style>
